<style lang="scss">
    #gene{
        background: #fff;
        padding:10px;
        .m-card{
            margin:10px 0;
        }
        .gene-name{
            font-weight:400;
        }
        .drug-title{
            padding-left:20px;
            margin-top:20px;
        }
    }
</style>
<template>
    <div id="gene" class="content-mask" v-loading="loading">
        <!--基因描述-->
        <el-card class="m-card">
            <h2 class="gene-name">基因：<span>{{geneObject.entrezSymbol}}</span></h2>
            <div class="block">
                <p class="block-des" v-text="geneObject.descch ? geneObject.descch : geneObject.descen"></p>
                <el-row>
                    <el-col :span="4">基因名称</el-col>
                    <el-col :span="12">{{geneObject.officailName}}</el-col>
                    <el-col :span="4">参考转录本</el-col>
                    <el-col :span="4">{{geneObject.curatedrefseq}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">Entrez Symbol</el-col>
                    <el-col :span="12">{{geneObject.entrezSymbol}}</el-col>
                    <el-col :span="4">染色体</el-col>
                    <el-col :span="4">{{geneObject.chromosome}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">Entrez ID</el-col>
                    <el-col :span="12"> {{geneObject.entrezId}}</el-col>
                    <el-col :span="4">起始位置</el-col>
                    <el-col :span="4">{{geneObject.start}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">别名</el-col>
                    <el-col :span="12">{{geneObject.synonymname}}</el-col>
                    <el-col :span="4">终止位置</el-col>
                    <el-col :span="4">{{geneObject.stop}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">Ensembl_ ID</el-col>
                    <el-col :span="12">{{geneObject.ensemblId}}</el-col>
                </el-row>
            </div>
        </el-card> 
        <!--变异位点-->
        <el-card class="m-card">
            <p class="l-title">
                <img src="/static/image/bywd.png" />
                <span>变异位点</span>
            </p>
            <div class="block">
                <p class="m-title">
                    <img src="/static/image/bx.png" />
                    <span>靶向</span>
                </p>
                <div class="block">
                    <div class="">
                        <p class="normal-button-content" v-if="variantList.length>0">
                            <span @click="goTargetVariation(item.variantId)" v-for="(item,index) in variantList" :key="index">{{item.variantName}}</span>
                        </p>
                        <p class="normal-button-content" v-else>
                        无
                        </p>
                    </div>
                </div>
            </div>
            <div class="block">
                <p class="m-title">
                    <img src="/static/image/bx.png" />
                    <span>药物基因组学</span>
                </p>
                <div class="block">
                    <div class="">
                        <p class="primary-button-content" v-if="pharmEvidentList.length>0">
                            <span @click="goChemVariation(item.variant)" v-for="(item,index) in pharmEvidentList" :key="index">{{item.variant}}</span>
                        </p>
                        <p class="primary-button-content" v-else>
                            无
                        </p>
                    </div>
                </div>
            </div>
        </el-card>
        <!--相关药物-->
        <el-card>
            <p class="l-title">
                <img src="/static/image/xgyw.png" />
                <span>相关药物</span>
            </p>
            <div class="block" v-if="targetDrugList.length>0">
                <p class="m-title drug-title">
                    <img src="/static/image/yw.png" />
                    <span>靶向药</span>
                </p>
                <el-row class="el-row-header drug-content-table">
                    <el-col :span="6">药物名称</el-col>
                    <el-col :span="6">中文名</el-col>
                    <el-col :span="6">药物名称</el-col>
                    <el-col :span="6">中文名</el-col>
                </el-row>
                <el-row class="drug-content-table" v-if="targetDrugList[2*index]" v-for="(item,index) in targetDrugList" :key="index">
                    <el-col v-if="targetDrugList[2*index]" :span="6"><a @click="goBasic(targetDrugList[2*index].id)">&nbsp;{{targetDrugList[2*index].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="targetDrugList[2*index]" :span="6">&nbsp;{{targetDrugList[2*index].chName}}&nbsp;</el-col>
                    <el-col v-if="targetDrugList[2*index+1]" :span="6"><a @click="goBasic(targetDrugList[2*index+1].id)">&nbsp;{{targetDrugList[2*index+1].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="targetDrugList[2*index+1]" :span="6">&nbsp;{{targetDrugList[2*index+1].chName}}&nbsp;</el-col>
                </el-row>
            </div>
            <div class="block" v-if="drugList.length>0">
                <p class="m-title drug-title">
                    <img src="/static/image/yw.png" />
                    <span>化疗药</span>
                </p>
                <el-row class="el-row-header drug-content-table">
                    <el-col :span="6">药物名称</el-col>
                    <el-col :span="6">中文名</el-col>
                    <el-col :span="6">药物名称</el-col>
                    <el-col :span="6">中文名</el-col>
                </el-row>
                <el-row class="drug-content-table" v-if="drugList[2*index]" v-for="(item,index) in drugList" :key="index">
                    <el-col v-if="drugList[2*index]" :span="6"><a @click="goBasic(drugList[2*index].id)">&nbsp;{{drugList[2*index].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="drugList[2*index]" :span="6">&nbsp;{{drugList[2*index].chName}}&nbsp;</el-col>
                    <el-col v-if="drugList[2*index+1]" :span="6"><a @click="goBasic(drugList[2*index+1].id)">&nbsp;{{drugList[2*index+1].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="drugList[2*index+1]" :span="6">&nbsp;{{drugList[2*index+1].chName}}&nbsp;</el-col>
                </el-row>
            </div>
            <div v-if="targetDrugList.length==0 && drugList.length == 0">
                无
            </div>
        </el-card>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: 'gene',//基因详情
    data(){
        return{
            loading:false,
            id:"",
            geneObject:{},
            variantList:[],
            pharmEvidentList:[],
            drugList:[],
            targetDrugList:[],
        }
    },
    methods:{
        //获取基因详细信息
        getGeneDetail(){
            let obj = {
                id : this.geneId
            };
            this.loading = true;
            medicine.getGeneById(obj).then((data)=>{
                if(data.status == 200){
                    this.geneObject = data.data;
                    this.getOtherData();
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("获取临床证据失败");
            });
        },
        getOtherData(){
            //获取变异位点
            if(this.geneObject.variantList && this.geneObject.variantList.length > 0){
                this.variantList = this.geneObject.variantList;
            }else{
                this.variantList = [];
            }
            //获取药物基因组学
            if(this.geneObject.pharmEvidentList && this.geneObject.pharmEvidentList.length > 0){
                this.pharmEvidentList = this.geneObject.pharmEvidentList;
            }else{
                this.pharmEvidentList = [];
            }
            //靶向药
            if(this.geneObject.targetDrugList && this.geneObject.targetDrugList.length > 0){
                this.targetDrugList = this.geneObject.targetDrugList;
            }else{
                this.targetDrugList = [];
            }
            //化疗药
            if(this.geneObject.drugList && this.geneObject.drugList.length > 0){
                this.drugList = this.geneObject.drugList;
            }else{
                this.drugList = [];
            }
        },
        //跳转至靶向变异页面
        goTargetVariation(id){
            if(this.$route.path == '/gene'){
                this.$router.push("/targetVariation?variantId="+id);
            }else if(this.$route.path == '/geneIndex'){
                this.$router.push("/geneIndex/target?variantId="+id);
            }
        },
        //跳转至化学变异页面
        goChemVariation(id){
            if(this.$route.path == '/gene'){
                this.$router.push("/chemVariation?chemId="+id);
            }else if(this.$route.path == '/geneIndex'){
                this.$router.push("/geneIndex/chem?chemId="+id);
            }
        },
        //跳转至药物基本信息页面
        goBasic(id){
            this.$store.state.searchType = 1;
            this.$store.state.searchId = id;
            sessionStorage.setItem("searchId", id);
            this.$router.push("/basic");
        }
    },
    mounted() {
        this.geneId = M.url().geneId ? M.url().geneId : '';
        this.getGeneDetail();
    },
    watch:{
        "$route":function(){
            if(this.geneId != this.$route.query.geneId){
                this.geneId = this.$route.query.geneId;
                this.getGeneDetail();
            }
        }
    },
}
</script>